<template>
  <div class="image-generate-page">
    <!-- 左侧：设置面板 -->
    <div class="left-panel">
      <div class="settings-panel">
        <h2>文生图</h2>
        
        <!-- Tab 切换 -->
        <el-tabs v-model="activeTab" class="generate-tabs">
          <el-tab-pane label="通过提示词生成" name="prompt-normal">
                <el-form label-width="90px" class="form">
                  <el-form-item label="文本描述" required>
                    <el-input
                      v-model="form.prompt"
                      type="textarea"
                      :autosize="{ minRows: 10, maxRows: 15 }"
                      placeholder="请描述您要生成的图像内容"
                      maxlength="1000"
                      show-word-limit
                    />
                  </el-form-item>

                  <el-form-item label="分辨率">
                    <el-radio-group v-model="form.resolution">
                      <el-radio value="2K">2K</el-radio>
                      <el-radio value="4K">4K</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="宽高比">
                    <el-select v-model="form.aspectRatio" placeholder="请选择宽高比" clearable>
                      <el-option
                        v-for="ratio in aspectRatios"
                        :key="ratio.value"
                        :label="ratio.label"
                        :value="ratio.value"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button 
                      type="primary" 
                      :loading="submitting" 
                      @click="handleSubmit" 
                      class="submit-btn"
                      size="default"
                    >
                      生成图像
                      <span class="points-text">0.5积分</span>
                    </el-button>
                  </el-form-item>
                </el-form>
          </el-tab-pane>

          <el-tab-pane label="通过图片生成" name="image-normal">
                <el-form label-width="90px" class="form">
                  <el-form-item label="上传图片" required>
                    <el-upload
                      v-model:file-list="imageFileList"
                      :auto-upload="false"
                      :limit="4"
                      :on-exceed="handleExceed"
                      :on-remove="handleRemoveImage"
                      :on-change="handleImageChange"
                      accept="image/*"
                      list-type="picture-card"
                      class="image-uploader"
                    >
                      <el-icon><Plus /></el-icon>
                      <template #tip>
                        <div class="el-upload__tip">
                          最多上传 4 张参考图片
                        </div>
                      </template>
                    </el-upload>
                  </el-form-item>

                  <el-form-item label="文本描述">
                    <el-input
                      v-model="form.imagePrompt"
                      type="textarea"
                      :autosize="{ minRows: 8, maxRows: 12 }"
                      placeholder="可选：描述您想要对图片进行的修改或生成方向"
                      maxlength="1000"
                      show-word-limit
                    />
                  </el-form-item>

                  <el-form-item label="分辨率">
                    <el-radio-group v-model="form.resolution">
                      <el-radio value="2K">2K</el-radio>
                      <el-radio value="4K">4K</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="宽高比">
                    <el-select v-model="form.aspectRatio" placeholder="请选择宽高比" clearable>
                      <el-option
                        v-for="ratio in aspectRatios"
                        :key="ratio.value"
                        :label="ratio.label"
                        :value="ratio.value"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button 
                      type="primary" 
                      :loading="submitting" 
                      @click="handleImageSubmit" 
                      class="submit-btn"
                      size="default"
                    >
                      生成图像
                      <span class="points-text">0.5积分</span>
                    </el-button>
                  </el-form-item>
                </el-form>
          </el-tab-pane>

          <el-tab-pane label="通过提示词生成(pro)" name="prompt-pro">
            <el-form label-width="90px" class="form">
              <el-form-item label="文本描述" required>
              <el-input
                v-model="form.prompt"
                type="textarea"
                :autosize="{ minRows: 10, maxRows: 15 }"
                placeholder="请描述您要生成的图像内容"
                maxlength="1000"
                show-word-limit
              />
              </el-form-item>

              <el-form-item label="分辨率">
                <el-radio-group v-model="form.resolution">
                  <el-radio value="2K">2K</el-radio>
                  <el-radio value="4K">4K</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="宽高比">
                <el-select v-model="form.aspectRatio" placeholder="请选择宽高比" clearable>
                  <el-option
                    v-for="ratio in aspectRatios"
                    :key="ratio.value"
                    :label="ratio.label"
                    :value="ratio.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button 
                  type="primary" 
                  :loading="submitting" 
                  @click="handleSubmit" 
                  class="submit-btn"
                  size="large"
                >
                  生成图像
                  <span class="points-text">1.5积分</span>
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="通过图片生成(pro)" name="image-pro">
            <el-form label-width="90px" class="form">
              <el-form-item label="上传图片" required>
                <el-upload
                  v-model:file-list="imageFileList"
                  :auto-upload="false"
                  :limit="8"
                  :on-exceed="handleExceed"
                  :on-remove="handleRemoveImage"
                  :on-change="handleImageChange"
                  accept="image/*"
                  list-type="picture-card"
                  class="image-uploader"
                >
                  <el-icon><Plus /></el-icon>
                  <template #tip>
                    <div class="el-upload__tip">
                      最多上传 8 张参考图片
                    </div>
                  </template>
                </el-upload>
              </el-form-item>

              <el-form-item label="文本描述">
                <el-input
                  v-model="form.imagePrompt"
                  type="textarea"
                  :autosize="{ minRows: 8, maxRows: 12 }"
                  placeholder="可选：描述您想要对图片进行的修改或生成方向"
                  maxlength="1000"
                  show-word-limit
                />
              </el-form-item>

              <el-form-item label="分辨率">
                <el-radio-group v-model="form.resolution">
                  <el-radio value="1K">1K</el-radio>
                  <el-radio value="2K">2K</el-radio>
                  <el-radio value="4K">4K</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="宽高比">
                <el-select v-model="form.aspectRatio" placeholder="请选择宽高比" clearable>
                  <el-option
                    v-for="ratio in aspectRatios"
                    :key="ratio.value"
                    :label="ratio.label"
                    :value="ratio.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button 
                  type="primary" 
                  :loading="submitting" 
                  @click="handleImageSubmit" 
                  class="submit-btn"
                  size="large"
                >
                  生成图像
                  <span class="points-text">1.5积分</span>
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 右侧：结果列表 -->
    <div class="right-panel">
      <div class="result-header">
        <h3>生成记录</h3>
        <el-button size="small" @click="fetchList(true)" :loading="listLoading">
          刷新
        </el-button>
      </div>
      <div 
        class="result-list" 
        ref="scrollContainer"
        @scroll="handleScroll"
        v-loading="listLoading && records.length === 0"
      >
        <div v-if="records.length === 0 && !listLoading" class="empty-state">
          <div class="empty-icon">🎨</div>
          <div class="empty-text">暂无生成记录</div>
          <div class="empty-hint">在左侧输入提示词开始生成</div>
        </div>
        <div v-for="(item, index) in records" :key="item.id || index" class="result-item">
          <div class="result-meta">
            <span class="result-time">{{ formatTime(item.create_time) }}</span>
            <el-tag :type="getStatusTypeByNumber(item.status)" size="small">
              {{ getStatusText(item.status) }}
            </el-tag>
          </div>
          <div class="result-prompt">{{ item.prompt }}</div>
          <!-- status=2 时显示图片 -->
          <div class="result-images" v-if="Number(item.status) === 2 && item.result_image_url">
            <div 
              class="result-image-item"
            >
              <img :src="item.result_image_url" alt="生成结果" @click="previewImage(item.result_image_url)" />
              <div class="image-actions">
                <el-button 
                  type="primary" 
                  size="small" 
                  :icon="Download" 
                  @click.stop="downloadImage(item.result_image_url)"
                  circle
                >
                </el-button>
              </div>
            </div>
          </div>
          <!-- status=0 或 1 时显示占位符 -->
          <div v-else-if="Number(item.status) === 0 || Number(item.status) === 1" class="result-placeholder">
            <div class="loading-placeholder">
              <el-icon class="is-loading"><Loading /></el-icon>
              <span>生成中...</span>
            </div>
          </div>
          <!-- 其他状态或没有图片时 -->
          <div v-else class="result-placeholder">
            <div class="loading-placeholder">暂无图片</div>
          </div>
        </div>
        <div v-if="hasMore && !listLoading && records.length > 0" class="load-more">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>加载更多...</span>
        </div>
        <div v-if="!hasMore && records.length > 0" class="load-end">
          没有更多了
        </div>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="previewVisible" title="图片预览" width="80%">
      <div class="preview-container">
        <img :src="previewImageUrl" alt="预览" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import { Loading, Plus, Download } from '@element-plus/icons-vue'
import { apiRequest, API_CONFIG, COS_CONFIG } from '@/config/api'
import COS from 'cos-js-sdk-v5'

const activeTab = ref('prompt-normal') // tab：prompt-normal, image-normal, prompt-pro, image-pro

const form = ref({
  prompt: '- 人物形象：中国人\n\n- 拍摄类型：上半身肖像\n\n- 动作：展示一位佩戴着细框大圆眼镜的主体。\n\n- 着装：一件灰色卫衣。\n\n- 背景：一间墙壁为浅色、配有一些柜子的房间。',
  imagePrompt: '',
  numImages: 1,
  resolution: '2K',
  aspectRatio: '16:9'
})

const imageFileList = ref([])
const uploadedImageUrls = ref([])
const submitting = ref(false)

const page = ref(1)
const pageSize = ref(20)
const records = ref([])
const listLoading = ref(false)
const hasMore = ref(true) // 初始值改为 true，确保首次可以加载
const scrollContainer = ref(null)

const previewVisible = ref(false)
const previewImageUrl = ref('')

const aspectRatios = [
  { label: '1:1 - 正方形', value: '1:1' },
  { label: '16:9 - 横屏', value: '16:9' },
  { label: '9:16 - 竖屏', value: '9:16' },
  { label: '4:3 - 横屏', value: '4:3' },
  { label: '3:4 - 竖屏', value: '3:4' }
]

// 处理图片上传
const handleImageChange = async (file) => {
  if (!file.raw) return
  
  if (!file.raw.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件')
    const index = imageFileList.value.findIndex(f => f.uid === file.uid)
    if (index > -1) {
      imageFileList.value.splice(index, 1)
    }
    return
  }

  const loading = ElLoading.service({
    lock: true,
    text: '上传图片中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    const extension = file.raw.name.split('.').pop()?.toLowerCase() || 'jpg'
    
    // 生成文件路径
    const timestamp = Date.now()
    const randomStr = Math.random().toString(36).substring(2, 15)
    const fileName = `${timestamp}_${randomStr}.${extension}`
    const Key = `image-generate/${new Date().toISOString().split('T')[0]}/${fileName}`

    // 使用 COS SDK 上传
    const cos = new COS({
      SecretId: COS_CONFIG.SecretId,
      SecretKey: COS_CONFIG.SecretKey,
      FileParallelLimit: 3,
      ChunkParallelLimit: 3,
      ChunkSize: 1024 * 1024,
      SliceSize: 1024 * 1024
    })

    // 上传文件
    await new Promise((resolve, reject) => {
      cos.putObject({
        Bucket: COS_CONFIG.Bucket,
        Region: COS_CONFIG.Region,
        Key: Key,
        Body: file.raw,
        onProgress: (progressData) => {
          // 可以在这里更新上传进度
          console.log('上传进度:', progressData.percent * 100 + '%')
        }
      }, (err, data) => {
        if (err) {
          reject(err)
        } else {
          resolve(data)
        }
      })
    })

    // 构建文件访问 URL
    const fileUrl = `https://${COS_CONFIG.Bucket}.cos.${COS_CONFIG.Region}.myqcloud.com/${Key}`
    uploadedImageUrls.value.push(fileUrl)
    file.url = fileUrl
    file.status = 'success'

    ElMessage.success('图片上传成功')
  } catch (err) {
    console.error('图片上传失败:', err)
    ElMessage.error(err.message || '图片上传失败')
    const index = imageFileList.value.findIndex(f => f.uid === file.uid)
    if (index > -1) {
      imageFileList.value.splice(index, 1)
    }
  } finally {
    loading.close()
  }
}

const handleRemoveImage = (file) => {
  // 从已上传的 URL 列表中移除对应的 URL
  const index = uploadedImageUrls.value.findIndex(url => url === file.url)
  if (index > -1) {
    uploadedImageUrls.value.splice(index, 1)
  }
}

const handleExceed = () => {
  const isNormalImageTab = activeTab.value === 'image-normal'
  const maxLimit = isNormalImageTab ? 4 : 8
  ElMessage.warning(`最多只能上传 ${maxLimit} 张图片`)
}

// 提交生成任务（通过提示词）
const handleSubmit = async () => {
  if (!form.value.prompt || !form.value.prompt.trim()) {
    ElMessage.error('请输入文本描述')
    return
  }

  if (form.value.prompt.trim().length > 1000) {
    ElMessage.error('文本描述不能超过 1000 字符')
    return
  }

  submitting.value = true
  const loading = ElLoading.service({
    lock: true,
    text: '提交生成任务中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    const submitData = {
      prompt: form.value.prompt.trim(),
      numImages: 1 // 固定为1张
    }

    // 添加可选参数
    if (form.value.resolution) {
      submitData.resolution = form.value.resolution
    }
    if (form.value.aspectRatio) {
      submitData.aspectRatio = form.value.aspectRatio
    }

    console.log('提交数据:', submitData)

    // 根据当前tab选择接口：普通版使用 /nanobanana/generate，Pro版使用 /nanobanana/textToImage
    const isPro = activeTab.value === 'prompt-pro'
    const apiEndpoint = isPro ? '/nanobanana/textToImage' : '/nanobanana/generate'
    
    // 调用后端接口
    const resp = await apiRequest(apiEndpoint, {
      method: 'POST',
      body: JSON.stringify(submitData)
    })

    if (resp.code === 200) {
      ElMessage.success(resp.msg || '任务提交成功')
      // 刷新列表
      page.value = 1
      records.value = []
      hasMore.value = true
      await fetchList(true)
      // 滚动到顶部
      if (scrollContainer.value) {
        scrollContainer.value.scrollTop = 0
      }
    } else {
      ElMessage.error(resp.msg || '提交失败')
    }
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error(error.message || '提交失败，请重试')
  } finally {
    submitting.value = false
    loading.close()
  }
}

// 提交生成任务（通过图片）
const handleImageSubmit = async () => {
  if (!uploadedImageUrls.value || uploadedImageUrls.value.length === 0) {
    ElMessage.error('请先上传图片')
    return
  }

  if (form.value.imagePrompt && form.value.imagePrompt.trim().length > 1000) {
    ElMessage.error('文本描述不能超过 1000 字符')
    return
  }

  submitting.value = true
  const loading = ElLoading.service({
    lock: true,
    text: '提交生成任务中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  try {
    const submitData = {
      imageUrls: uploadedImageUrls.value,
      type: 'IMAGETOIAMGE' // 图生图类型
    }

    // 如果有文本描述，添加到提示词
    if (form.value.imagePrompt && form.value.imagePrompt.trim()) {
      submitData.prompt = form.value.imagePrompt.trim()
    }

    // 添加可选参数
    submitData.numImages = 1 // 固定为1张
    
    if (form.value.resolution) {
      submitData.resolution = form.value.resolution
    }
    if (form.value.aspectRatio) {
      submitData.aspectRatio = form.value.aspectRatio
    }

    console.log('提交数据（图片生成）:', submitData)

    // 根据当前tab选择接口：普通版使用 /nanobanana/generate，Pro版使用 /nanobanana/textToImage
    const isPro = activeTab.value === 'image-pro'
    const apiEndpoint = isPro ? '/nanobanana/textToImage' : '/nanobanana/generate'
    
    // 调用后端接口
    const resp = await apiRequest(apiEndpoint, {
      method: 'POST',
      body: JSON.stringify(submitData)
    })

    if (resp.code === 200) {
      ElMessage.success(resp.msg || '任务提交成功')
      // 刷新列表
      page.value = 1
      records.value = []
      hasMore.value = true
      await fetchList(true)
      // 滚动到顶部
      if (scrollContainer.value) {
        scrollContainer.value.scrollTop = 0
      }
    } else {
      ElMessage.error(resp.msg || '提交失败')
    }
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error(error.message || '提交失败，请重试')
  } finally {
    submitting.value = false
    loading.close()
  }
}

// 获取任务列表
async function fetchList(reset = false) {
  if (reset) {
    page.value = 1
    records.value = []
    hasMore.value = true
  }
  
  if (!hasMore.value || listLoading.value) return
  
  listLoading.value = true
  try {
    const resp = await apiRequest('/nanobanana/list', {
      method: 'GET',
      params: { page: page.value, pageSize: pageSize.value }
    })
    
    console.log('列表响应:', resp)
    
    if (resp.code === 200) {
      const newRecords = Array.isArray(resp.data?.list) ? resp.data.list : []
      console.log('解析后的记录:', newRecords)
      
      if (reset) {
        records.value = newRecords
      } else {
        records.value.push(...newRecords)
      }
      
      console.log('当前记录数:', records.value.length)
      
      // 判断是否还有更多：返回的数据量等于每页数量，说明可能还有更多
      hasMore.value = newRecords.length === pageSize.value
      if (hasMore.value) {
        page.value++
      } else {
        // 如果没有返回数据或返回的数据少于每页数量，说明没有更多了
        hasMore.value = false
      }
    } else {
      // 请求失败时，也设置为没有更多
      hasMore.value = false
      console.error('获取列表失败:', resp.msg || resp.message)
    }
  } catch (error) {
    console.error('获取列表失败:', error)
  } finally {
    listLoading.value = false
  }
}

// 滚动加载
function handleScroll() {
  if (!scrollContainer.value || !hasMore.value || listLoading.value) return
  
  const { scrollTop, scrollHeight, clientHeight } = scrollContainer.value
  // 距离底部 100px 时加载
  if (scrollHeight - scrollTop - clientHeight < 100) {
    fetchList()
  }
}

function formatTime(timeStr) {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${month}-${day} ${hours}:${minutes}`
}

function getStatusType(status) {
  const statusMap = {
    '成功': 'success',
    '失败': 'danger',
    '生成中': 'info',
    '已完成': 'success',
    '处理中': 'info'
  }
  return statusMap[status] || 'info'
}

// 根据数字状态获取状态文本
function getStatusText(status) {
  const statusNum = Number(status)
  if (statusNum === 2) {
    return '已完成'
  } else if (statusNum === 1 || statusNum === 0) {
    return '生成中'
  } else {
    return '未知状态'
  }
}

// 根据数字状态获取标签类型
function getStatusTypeByNumber(status) {
  const statusNum = Number(status)
  if (statusNum === 2) {
    return 'success'
  } else if (statusNum === 1 || statusNum === 0) {
    return 'info'
  } else {
    return 'danger'
  }
}

function previewImage(url) {
  previewImageUrl.value = url
  previewVisible.value = true
}

// 下载图片
function downloadImage(url) {
  if (!url) {
    ElMessage.error('图片地址无效')
    return
  }
  
  try {
    // 创建一个临时的 a 标签来下载
    const link = document.createElement('a')
    link.href = url
    link.download = `generated-image-${Date.now()}.jpg` // 设置下载文件名
    link.target = '_blank'
    
    // 处理跨域问题：如果图片跨域，需要先 fetch 再下载
    fetch(url)
      .then(response => response.blob())
      .then(blob => {
        const blobUrl = window.URL.createObjectURL(blob)
        link.href = blobUrl
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(blobUrl)
        ElMessage.success('图片下载成功')
      })
      .catch(err => {
        console.error('下载失败:', err)
        // 如果 fetch 失败，尝试直接下载（可能因为跨域问题）
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        ElMessage.success('开始下载图片')
      })
  } catch (error) {
    console.error('下载图片失败:', error)
    ElMessage.error('下载失败，请重试')
  }
}

onMounted(() => {
  fetchList(true) // 首次加载时重置
})
</script>

<style scoped>
.image-generate-page {
  display: flex;
  height: calc(100vh - 64px);
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

/* 左侧设置面板 */
.left-panel {
  width: 800px;
  flex-shrink: 0;
  overflow: hidden;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.result-header h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.result-list {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.result-list::-webkit-scrollbar {
  width: 8px;
}

.result-list::-webkit-scrollbar-track {
  background: transparent;
}

.result-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-text {
  color: #fff;
  font-size: 16px;
  margin-bottom: 8px;
}

.empty-hint {
  color: #909399;
  font-size: 14px;
}

.result-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.result-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(64, 158, 255, 0.3);
}

.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.result-time {
  color: #909399;
  font-size: 12px;
}

.result-prompt {
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  word-break: break-word;
}

.result-images {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.result-image-item {
  position: relative;
  aspect-ratio: 9 / 16;
  max-width: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  transition: transform 0.2s ease;
}

.result-image-item:hover {
  transform: scale(1.02);
}

.result-image-item img {
  cursor: pointer;
}

.image-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
  opacity: 1;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.image-actions .el-button {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}

.image-actions .el-button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

.result-image-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.3);
}

.result-placeholder {
  aspect-ratio: 9 / 16;
  max-width: 300px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.loading-placeholder {
  color: #909399;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.loading-placeholder .el-icon {
  font-size: 24px;
}

.load-more,
.load-end {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.settings-panel {
  background: linear-gradient(145deg, #1a1a1f, #1f1f25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 32px 24px 32px 16px;
  color: #fff;
  height: 100%;
  overflow: hidden;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}

.settings-panel h2 {
  flex-shrink: 0;
}

.settings-panel h2 {
  margin: 0 0 24px 0;
  color: #fff !important;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.5px;
}

/* 外层 Tab 样式（版本选择） */
.version-tabs {
  margin-top: 8px;
}

:deep(.version-tabs .el-tabs__header) {
  margin-bottom: 16px;
}

:deep(.version-tabs .el-tabs__nav-wrap::after) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.version-tabs .el-tabs__item) {
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  padding: 0 24px;
  height: 44px;
  line-height: 44px;
}

:deep(.version-tabs .el-tabs__item:hover) {
  color: #fff !important;
  opacity: 0.8;
}

:deep(.version-tabs .el-tabs__item.is-active) {
  color: #fff !important;
  font-weight: 600;
}

:deep(.version-tabs .el-tabs__active-bar) {
  background-color: #409eff !important;
  height: 3px;
}

/* Tab 样式 */
.generate-tabs {
  margin-top: 8px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

:deep(.generate-tabs .el-tabs) {
  height: 100%;
  display: block;
}

:deep(.generate-tabs .el-tabs__header) {
  margin-bottom: 24px;
  flex-shrink: 0;
  order: 1 !important;
}

:deep(.generate-tabs .el-tabs__content) {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  order: 2 !important;
}

:deep(.generate-tabs .el-tab-pane) {
  height: 100%;
  overflow-y: auto;
}

:deep(.generate-tabs .el-tabs__body) {
  height: 100%;
  overflow: hidden;
}

:deep(.generate-tabs .el-tabs__nav-wrap::after) {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

:deep(.generate-tabs .el-tabs__item) {
  color: #fff !important;
  font-size: 14px;
  font-weight: 500;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
}

:deep(.generate-tabs .el-tabs__item:hover) {
  color: #fff !important;
  opacity: 0.8;
}

:deep(.generate-tabs .el-tabs__item.is-active) {
  color: #fff !important;
  font-weight: 600;
}

:deep(.generate-tabs .el-tabs__active-bar) {
  background-color: #409eff !important;
  height: 3px;
}

/* 图片上传样式 */
.image-uploader {
  width: 100%;
}

:deep(.image-uploader .el-upload) {
  border: 2px dashed rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.02) !important;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.image-uploader .el-upload:hover) {
  border-color: #409eff !important;
  background: rgba(64, 158, 255, 0.1) !important;
}

:deep(.image-uploader .el-upload-list--picture-card) {
  width: 100%;
}

:deep(.image-uploader .el-upload-list--picture-card .el-upload-list__item) {
  width: 100% !important;
  height: 200px !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

:deep(.image-uploader .el-upload-list--picture-card .el-upload-list__item img) {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 右侧结果列表 */
.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #1e1e24, #23232a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
}

.settings-panel::-webkit-scrollbar {
  width: 8px;
}

.settings-panel::-webkit-scrollbar-track {
  background: transparent;
}

.settings-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.form {
  width: 100%;
}

:deep(.el-form-item__content) {
  margin-left: 0 !important;
}

:deep(.el-form-item) {
  margin-bottom: 28px;
}

:deep(.el-form-item__label) {
  color: #e5e7eb !important;
  font-weight: 500;
  font-size: 14px;
  padding-bottom: 8px;
  text-align: left !important;
  padding-right: 8px !important;
  padding-left: 0 !important;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  line-height: 1.5;
}

.submit-btn {
  position: relative;
  padding-right: 100px !important;
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%) !important;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.4);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.5);
}

.points-text {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 1;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 500;
}

.aspect-ratio-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.aspect-ratio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid transparent;
}

.aspect-ratio-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(64, 158, 255, 0.3);
  transform: translateY(-2px);
}

.aspect-ratio-item.active {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.2), rgba(102, 177, 255, 0.15));
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.ratio-box {
  width: 100%;
  min-height: 50px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.aspect-ratio-item.active .ratio-box {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.4), rgba(102, 177, 255, 0.3));
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
}

.ratio-label {
  font-size: 13px;
  color: #a0aec0;
  font-weight: 500;
  transition: all 0.3s ease;
}

.aspect-ratio-item.active .ratio-label {
  color: #66b1ff;
  font-weight: 600;
}

.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.preview-container img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
}

/* 输入框样式 */
:deep(.el-input__wrapper),
:deep(.el-textarea__inner) {
  background: rgba(15, 15, 18, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__inner:hover) {
  border-color: rgba(64, 158, 255, 0.4) !important;
  background: rgba(15, 15, 18, 0.8) !important;
}

:deep(.el-input.is-focus .el-input__wrapper),
:deep(.el-textarea.is-focus .el-textarea__inner) {
  border-color: #409eff !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

:deep(.el-input__inner::placeholder),
:deep(.el-textarea__inner::placeholder) {
  color: rgba(255, 255, 255, 0.4) !important;
}

:deep(.el-textarea__inner) {
  padding: 14px 16px !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

/* 字数统计样式 - 黑色 */
:deep(.el-input__count) {
  color: #000 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* 下拉框样式 */
:deep(.el-select .el-input__wrapper) {
  background: #0f0f12 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-select-dropdown) {
  background: #1b1b20 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-select-dropdown__item) {
  color: #fff !important;
}

:deep(.el-select-dropdown__item:hover) {
  background: #2a2a30 !important;
}

:deep(.el-select-dropdown__item.selected) {
  background: #409eff !important;
}

/* 单选框样式 */
:deep(.el-radio) {
  color: #e5e7eb !important;
  margin-right: 24px;
  font-size: 14px;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  background-color: #409eff !important;
  border-color: #409eff !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

:deep(.el-radio__inner:hover) {
  border-color: #409eff !important;
}

/* 滑块样式 */
:deep(.el-slider) {
  margin: 16px 0;
}

:deep(.el-slider__runway) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  height: 6px !important;
}

:deep(.el-slider__bar) {
  background: linear-gradient(90deg, #409eff, #66b1ff) !important;
  height: 6px !important;
}

:deep(.el-slider__button) {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #409eff !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.4);
}

:deep(.el-slider__button:hover) {
  transform: scale(1.2);
}

/* 表格样式 */
:deep(.el-table),
:deep(.el-table th),
:deep(.el-table td) {
  background: #23232a !important;
  color: #fff !important;
  border: none !important;
}

:deep(.el-table__inner-wrapper::before),
:deep(.el-table--border .el-table__inner-wrapper::after) {
  background-color: transparent !important;
}

:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-bottom: none !important;
}

/* 分页样式 */
:deep(.el-pagination) {
  background: #23232a !important;
}

:deep(.el-pagination .btn-prev),
:deep(.el-pagination .btn-next),
:deep(.el-pagination button) {
  background: #1b1b1f !important;
  color: #fff !important;
  border: none !important;
}

:deep(.el-pagination .el-pager li) {
  background: #1b1b1f !important;
  color: #fff !important;
  border: none !important;
}

:deep(.el-pagination .el-pager li.is-active) {
  background: #409eff !important;
  color: #fff !important;
}

/* 按钮样式 */
:deep(.el-button--primary) {
  background: #409eff !important;
  border: none !important;
  color: #fff !important;
}

:deep(.el-button--primary:hover) {
  background: #337ecc !important;
}
</style>


